<template>
  <!--设备盘点管理-->
  <div style="padding: 20px">
    <el-card class="box-card">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="全部" name="first">
          <div>
            <el-button @click="handleNewTask">新增</el-button>
            <el-button @click="handleDelete">删除</el-button>
            <el-button @click="handleClose">派工</el-button>
            <el-button @click="handleExport">导出</el-button>
            <el-input
              placeholder="请输入报修编号或名称"
              clearable
              prefix-icon="el-icon-search"
              suffix-icon="el-icon-s-cale"
              style="width: 250px; margin-left: 540px"
              v-model="inputText"
              @input="handleSearch"
            />
            <el-popover placement="right" width="400" trigger="click">
              <svg-icon
                icon-class="caiss"
                style="width: 40px; height: 20px"
                class="pointer"
                slot="reference"
              />
            </el-popover>
          </div>
          <el-table :data="ListData" style="width: 100%; margin-top: 20px">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="序号" label="序号" width="50" />
            <el-table-column label="操作" width="80">
              <template v-slot="scope">
                <el-button type="text" @click="handleView(scope.row)">查看</el-button>
              </template>
            </el-table-column>
            <el-table-column prop="frrType" label="状态" />
            <el-table-column prop="code" label="报修单号" />
            <el-table-column prop="frrTopic" label="报修主题" />
            <el-table-column prop="frrPerson" label="报修人" />
            <el-table-column prop="deviceDept.deptName" label="所在部门" />
            <el-table-column prop="frrTime" label="报修时间" />
            <el-table-column prop="frrBadtime" label="故障时间"  />
            <el-table-column prop="frrBadgrade" label="故障等级">
              <template slot-scope="scope">
                <el-tag type="success" effect="dark" v-if="scope.row.frrBadgrade == 0">极高</el-tag>
                <el-tag type="warning" effect="dark" v-if="scope.row.frrBadgrade == 1">高</el-tag>
                <el-tag type="danger" effect="dark" v-if="scope.row.frrBadgrade == 2">中</el-tag>
                <el-tag type="danger" effect="dark" v-if="scope.row.frrBadgrade == 3">低</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="frrBadtype" label="故障类别" />
            <el-table-column prop="isStop" label="是否停机">
              <template slot-scope="scope">
                <el-tag type="success" effect="dark" v-if="scope.row.isStop == 0">是</el-tag>
                <el-tag type="warning" effect="dark" v-if="scope.row.isStop == 1">否</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="equipment.name" label="设备名称" />
            <el-table-column prop="equipment.code" label="设备编号" />
            <el-table-column prop="equipment.deviceType" label="设备类型" />
            <el-table-column prop="equipment.manufacture" label="规格型号" />
            <el-table-column prop="equipment.useDepartments" label="使用部门" />
            <el-table-column prop="equipment.storageLocation" label="存放位置" />
            <el-table-column prop="notes" label="备注" />
          </el-table>
          <el-pagination
            background
            style="margin-top: 20px; text-align: right"
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            layout="prev, pager, next, sizes, total"
            :page-sizes="[10, 20, 30, 50]"
            @current-change="handlePageChange"
          />
        </el-tab-pane>
        <el-tab-pane label="我的申请" name="second">我的报修</el-tab-pane>
        <el-tab-pane label="我的审批" name="third">我的审批</el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
// @ts-ignore
import { list, addft, updateft, updatestate, delft } from "@/api/test/frr";
export default {
  data() {
    return {
      activeName: "first",
      inputText: "",  // 用于搜索的输入框
      data: {
        code: "",
        equipment: "",
        frrBadgrade: "",
        frrBadtime: "",
        frrBadtype: "",
        frrEquipmentId: "",
        frrId: "",
        frrPerson: "",
        frrTime: "",
        frrTopic: "",
        frrType: "",
        insertPerson: "",
        insertTime: "",
        isDelete: "",
        isStop: "",
        notes: "",
        relevancy: "",
        updatePerson: "",
        updateTime: ""
      },
      ListData: [],
      currentPage: 1,
      pageSize: 10,
    
    };
  },
  computed: {
    total() {
      return this.ListData.length;  // 根据实际数据计算总条数
    },
  },
  created() {
    this.getList();
  },
  watch: {
    inputText(newValue) {
      this.getList(); // 输入框内容变化时重新查询
    }
  },
  methods: {
    getList() {
      const data = {
        page: this.currentPage,  // 使用当前页
        size: this.pageSize,  // 使用每页条数
        condition: this.inputText // 使用输入框的内容作为条件
      };
      list(data).then((res) => {
        console.log("data-res:", res);
        this.ListData = res.records;  // 更新 ListData
      });
    },




    handleClick(tab, event) {
      console.log("卡片", tab, event);
      this.getList();  // 切换标签时获取数据
    },

    handleSearch() {
      this.currentPage = 1;  // 重置为第一页
      this.getList();  // 触发搜索
    },

    handleNewTask() {
      this.$router.push({ path: "/gz/vue/gz/add" });
    },

    handleDelete() {
      // 处理删除操作
    },

    handleView(row) {
      this.$router.push({ path: "/sb/chu/pan/cha" });
    },

    handleClose() {
      // 处理关闭操作
    },

    handleExport() {
      // 处理导出操作
    },

    handlePageChange(page) {
      this.currentPage = page;  // 更新当前页
      this.getList();  // 获取新页的数据
    },
  },
};
</script>

<style>
/* 自定义样式 */
.text {
  font-size: 14px;
}

.item {
  padding: 18px 0;
}

.box-card {
  width: 1210px;
  height: 660px;
  margin-left: 14px;
}
</style>
